<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-选择器</title>
    <style>
        /*id选择器*/
        #ph1 {
            background-color: pink;
        }
        /*类选择器class*/
        .ph2{
            color: red;
        }
        /*属性选择器: 通过元素的属性匹配元素
        格式: 标签名[属性名='值']{样式代码}*/
        input[type='text']{background-color: orange}
        /*任意元素选择器:匹配页面中的所有元素
             格式: *{样式代码}
        */
        *{
            /*边框：粗细  样式：颜色*/
            border: 1px solid powderblue;
        }

        /*分组选择器: 将多个选择器划分为同一组进行统一管理
             格式: div,#id,.class{样式代码}
        */
        h3, #ph1, .ph2{
            font-size: 10px;
        }

    </style>
</head>
<body>
    <input type="text">
    <input type="password">
    <h2>这是一个h2标题哦~~</h2>
    <h3>这是h3标题</h3>
    <p id="ph1">华为手机 Mate 60 pro</p>
    <p class="ph2">苹果手机 iPhone 15 pro max</p>
    <div>香蕉</div>
    <div class="ph2">小米手机</div>
</body>
</html>
